<script setup lang="ts">
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import useSettingStore from '@/stores/modules/setting';
const settingStore = useSettingStore();

const { asideActive, asideExpand, currentMenuItem } = storeToRefs(settingStore);
const { setAsideFold } = settingStore;
const asideClassObj = computed(() => ({
  active: asideActive.value && !asideExpand.value,
  expand: asideActive.value && asideExpand.value,
}));

const handleClickClose = () => {
  currentMenuItem.value = '';
  setAsideFold();
};
</script>

<script lang="ts">
export default {
  name: 'YAside',
};
</script>

<template>
  <aside class="w-[320px] bg-green-400 relative" :class="asideClassObj">
    <div
      class="absolute icon-wrapper right-5 top-5 cursor-pointer rounded-sm flex flex-col border border-solid border-gray-500 hover:bg-white"
    >
      <div class="relative expand p-1" @click="asideExpand = !asideExpand">
        <svg-icon :name="asideExpand ? 'left' : 'right'" :size="{ width: 16, height: 16 }" />
      </div>
      <div class="relative p-1 hidden close" @click="handleClickClose">
        <svg-icon name="close" :size="{ width: 16, height: 16 }" />
      </div>
    </div>
  </aside>
</template>

<style scoped>
aside {
  overflow: hidden;
  width: 0;
  transition: all 0.2s ease-in-out;
}

aside.active {
  width: 320px;
  flex-shrink: 0;
}

aside.expand {
  flex: 1;
}

.icon-wrapper:hover > .expand {
  border-bottom: 1px solid #6b7280;
}

.icon-wrapper:hover > .close {
  display: block;
}
</style>
